<template>
  <div>
    <Card>
      <Tabs type="card" @on-click="changeTab">
        <TabPane :label="'保单：' + tabname" :name="tabname"></TabPane>
      </Tabs>
      <Timeline>
        <TimelineItem
          v-for="(item, index) in serviceRecord"
          :key="index"
          :color="item.linksuccessflag == '0' ? 'green' : 'blue'"
        >
          <div class="modalTitle">
            <Row gutter="10">
              <i-col span="6">
                <span>工作日期：</span>
                <span>{{ item.updateTime }}</span>
              </i-col>
              <i-col span="5">
                <span
                  class="conLabel"
                  v-if="
                    insuranceType == 'supervise' || insuranceType == 'charge'
                  "
                  >应交次数：</span
                >
                <span class="conLabel" v-else>已交次数：</span>
                <span class="gray"
                  >{{ item.payyear + "/" + item.payyears
                  }}{{ item.payintv }}</span
                >
              </i-col>
              <i-col span="5">
                <span>工作方式：</span>
                <span class="gray">{{
                  item.worktype ? item.worktype : ""
                }}</span>
              </i-col>
            </Row>
          </div>
          <div class="modalContent">
            <Row gutter="5">
              <i-col span="4">
                <span>处理人：</span>
                <span>{{ item.workname ? item.workname : "" }}</span>
                <Button type="default" size="small" class="waiqin">
                  <span style="font-size: 12px">{{ item.role }}</span>
                </Button>
              </i-col>
              <i-col span="4">
                <span>收费状态预估：</span>
                <span class="gray">{{
                  item.estimatestate === "0"
                    ? "可回收"
                    : item.estimatestate === "1"
                    ? "收费困难"
                    : item.estimatestate === "2"
                    ? "不可回收"
                    : item.estimatestate === "3"
                    ? "不确定"
                    : ""
                }}</span>
              </i-col>
              <i-col span="4">
                <span>预估交费难度：</span>
                <span class="gray">{{ item.difficulty }}级</span>
              </i-col>
              <i-col span="4">
                <span>交费时间预估：</span>
                <span class="gray" v-if="item.estimatedate">{{
                  item.estimatedate.substr(0, 10)
                }}</span>
              </i-col>
              <i-col span="4">
                <span>是否联系成功：</span>
                <span class="gray">{{
                  item.linksuccessflag === "0" ? "是" : "否"
                }}</span>
              </i-col>
              <i-col span="4">
                <span>主管陪访：</span>
                <span class="gray">{{
                  item.orderwith ? item.orderwith : "否"
                }}</span>
              </i-col>
            </Row>
            <div class="reasonDetail">
              <span>未收原因说明</span>
              <span v-for="(t2, index) in item.reasonByCompany" :key="index">
                <Button size="small" class="reasonBtn">{{ t2 }}</Button>
              </span>
              <span v-for="(t3, index) in item.reasonByCustomer" :key="index">
                <Button size="small" class="reasonBtn">{{ t3 }}</Button>
              </span>
              <span v-if="item.reasonByother">
                <Button size="small" class="reasonBtn">{{
                  item.reasonByother
                }}</Button>
              </span>
            </div>
            <div class="reasonDetail">
              <span>工作结果记录</span>
              <span v-for="(t2, index) in item.workresultid" :key="index">
                <Button size="small" class="reasonBtn">{{ t2 }}</Button>
              </span>
            </div>
            <div class="reasonDetail">
              <!-- <span class="gray" v-if="item.linksuccessflag==='0'">已经通知客户应交日期，请提前存钱</span> -->
              <span class="gray">{{ item.workresult }}</span>
            </div>
            <div class="reasonDetail">
              <span>实时扣款：{{ item.paystate }}</span>
            </div>
            <div class="reasonDetail">
              <Button
                v-if="item.recordingaddress"
                type="success"
                size="small"
                class="waiqin"
                @click="phoneRecordShow(item)"
                >电话录音</Button
              >
              <Modal
                footer-hide="true"
                :value="phoneRecord"
                :mask-closable="false"
                :closable="false"
                width="630"
                :styles="{ top: '200px' }"
              >
                <span slot="header" style="color: #fff; font-size: 14px"
                  >电话录音下载</span
                >
                <Table
                  :columns="phoneRecordColumns"
                  :data="phoneRecordData"
                  border
                >
                  <template slot-scope="{ row }" slot="audio">
                    <div @click="playOrPause(row)">
                      <Icon
                        class="playBtn"
                        v-if="row.handleplayOrPause"
                        type="ios-pause"
                      />
                      <Icon class="playBtn" v-else type="ios-play" />
                    </div>
                  </template>
                  <!-- v-if="row.recordingaddress" -->
                  <!-- <Icon class="playBtn" v-else type="ios-play" /> -->
                  <template slot-scope="{ row }" slot="opration">
                    {{ row.opration }}
                    <Button
                      type="success"
                      size="small"
                      style="
                        border-radius: 12px;
                        padding-left: 20px;
                        padding-right: 20px;
                      "
                      @click="downloadPhoneRecord(row.id)"
                      >下载</Button
                    >
                  </template>
                </Table>
                <Button
                  type="primary"
                  @click="modalVisibleChange3"
                  style="float: right; margin-top: 20px"
                  >返回</Button
                >
                <div class="clearBoth"></div>
              </Modal>
              <Button
                v-if="item.notedetail"
                type="success"
                size="small"
                class="waiqin"
                @click="messageContentShow(item)"
                >短信内容</Button
              >
              <Modal
                transfer
                footer-hide="true"
                :value="messageContent"
                :mask-closable="false"
                :closable="false"
                width="703"
                :styles="{ top: '200px' }"
              >
                <span slot="header" style="color: #fff; font-size: 14px"
                  >短信内容</span
                >
                <Table
                  :columns="messageContentColumns"
                  :data="messageContentData"
                  border
                ></Table>
                <Button
                  type="primary"
                  @click="modalVisibleChange4"
                  style="float: right; margin-top: 20px"
                  >返回</Button
                >
                <div class="clearBoth"></div>
              </Modal>
            </div>
            <div class="reasonDetail">
              <span>
                <Button
                  v-if="item.facecontent"
                  type="success"
                  size="small"
                  class="waiqin"
                  @click="interviewShow(item)"
                >
                  {{
                    item.evaluateflag === "Y"
                      ? "面访联系-评鉴表图片"
                      : "面访联系图片"
                  }}</Button
                >
              </span>
              <span>
                <Button
                  v-if="item.netcontent"
                  type="success"
                  size="small"
                  class="waiqin"
                  @click="internetShow(item)"
                  >网络联系图片</Button
                >
              </span>
            </div>
            <!-- 面访联系图片对话框  -->
            <Modal
              footer-hide="true"
              v-model="interviewModal"
              :value="interviewModal"
              :mask-closable="false"
              :closable="true"
              width="630"
              :styles="{ top: '200px' }"
            >
              <span slot="header" style="color: #fff; font-size: 14px"
                >面访联系图片</span
              >
              <Table :columns="interviewColumns" :data="interviewData" border>
                <template slot-scope="{ row }" slot="audio">
                  <div @click="showFile(row)">
                    <Icon
                      type="md-image"
                      v-if="row.icon == 'image'"
                      style="font-size: 20px"
                    />
                    <Icon
                      type="ios-paper"
                      v-if="row.icon == 'paper'"
                      style="font-size: 20px"
                    />
                  </div>
                </template>
                <template slot-scope="{ row }" slot="opration">
                  {{ row.opration }}
                  <Button
                    type="success"
                    size="small"
                    style="
                      border-radius: 12px;
                      padding-left: 20px;
                      padding-right: 20px;
                    "
                    @click="downloadInterview(row.id)"
                    >下载</Button
                  >
                </template>
              </Table>
              <Button
                type="primary"
                @click="modalVisibleChange6"
                style="float: right; margin-top: 20px"
                >返回</Button
              >
              <div class="clearBoth"></div>
            </Modal>
            <!-- 网络联系图片 -->
            <Modal
              footer-hide="true"
              :value="internetModal"
              :mask-closable="false"
              :closable="false"
              width="530"
              :styles="{ top: '200px' }"
            >
              <span slot="header" style="color: #fff; font-size: 14px"
                >网络联系图片</span
              >
              <Table :columns="internetColumns" :data="internetData" border>
                <template slot-scope="{ row }" slot="opration">
                  {{ row.opration }}
                  <Button
                    type="success"
                    size="small"
                    style="
                      border-radius: 12px;
                      padding-left: 20px;
                      padding-right: 20px;
                    "
                    @click="downloadInternet(row.id)"
                    >下载</Button
                  >
                </template>
              </Table>
              <Button
                type="primary"
                @click="modalVisibleChange7"
                style="float: right; margin-top: 20px"
                >返回</Button
              >
              <div class="clearBoth"></div>
            </Modal>
            <!-- 通知业务员 -->
            <div
              class="reasonDetail"
              v-if="
                item.uerMessageToAgentVOS &&
                item.uerMessageToAgentVOS.length > 0
              "
            >
              <span>通知业务员：</span>
            </div>
            <div
              class="reasonDetail"
              v-if="
                item.uerMessageToAgentVOS &&
                item.uerMessageToAgentVOS.length > 0
              "
              style="margin-left: 10px"
            >
              <div v-for="temp in item.uerMessageToAgentVOS" :key="temp">
                <Row style="margin-bottom: 10px">
                  <i-col style="color: rgba(128, 128, 128, 1)"
                    >{{ temp.senddate }} {{ temp.sendcontent }}</i-col
                  >
                </Row>
              </div>
            </div>
            <!-- 点评 -->
            <div class="reasonDetail" v-if="item.professionalCommentVOS">
              <div
                v-for="(ti, index) in item.professionalCommentVOS"
                :key="index"
              >
                <span>{{ ti.commentname }}点评：</span>
                <Rate v-model="ti.level" disabled />
                <span class="gray">{{ ti.comment }}</span>
                <span style="margin: 0 10px">{{ ti.createTime }}</span>
              </div>
            </div>
            <div
              class="reasonDetail"
              v-if="
                item.professionalCommentVOS &&
                (item.professionalCommentVOS.length === 0 || null)
              "
            >
              <span>上级点评：</span>
              <Rate v-model="superiorReview" disabled />
              <span>未评价</span>
            </div>
          </div>
        </TimelineItem>
        <div v-if="serviceRecord && serviceRecord.length !== 0">
          <TimelineItem
            v-for="(item, index) in serviceRecord[0].payFinishVOS"
            :key="index"
            :color="item.finishstate === '交费完成' ? 'green' : 'red'"
          >
            <span class="time mr20"
              >{{
                item.finishstate
              }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{
                item.lastpaytodate
              }}</span
            >
            <span
              class="conLabel"
              v-if="insuranceType == 'supervise' || insuranceType == 'charge'"
              >应交次数：</span
            >
            <span class="conLabel" v-else>已交次数：</span>
            <span class="content">{{
              item.paycount + "/" + item.payyears + "" + item.payintvname
            }}</span>
          </TimelineItem>
        </div>
      </Timeline>
      <!-- 显示图片 -->
      <Modal
        footer-hide="true"
        v-model="handleShowFile"
        width="1200px"
        title="在线预览"
      >
        <img
          style="width: 100%; height: 100%"
          :src="biggerPath"
          alt=""
          title="如需下载请右击"
        />
      </Modal>
    </Card>
  </div>
</template>
<script>
import { exportFile } from "../../../util/util";
export default {
  data() {
    return {
      biggerPath: "",
      handleShowFile: false,
      handleplayOrPause: false,
      audioUrl: new Audio(),
      audioid: "",
      interviewModal: false,
      internetModal: false,
      //tab标题
      tabname: "",
      serviceRecord: [],
      phoneRecord: false,
      phoneRecord: false,
      messageContent: false,
      // 未收原因说明
      notReceiveReasonList: [
        {
          reason: "业务员投保",
        },
        {
          reason: "家庭原因",
        },
      ],
      // 工作结果
      workResultList: [
        {
          workResult: "客户明确不交费",
        },
        {
          workResult: "家庭原因",
        },
      ],
      action1: "",
      action2: "",
      credentials: "",
      uploadLoading: false,
      uploadLoading2: false,
      fileIndex1: 0,
      fileIndex2: 0,
      tabIndex: 1,
      consoleIndex: 1,
      chargeRadio: "",
      reDatedisabled: true,
      chargeDifficultDisabled: false,
      couMoneyDisabled: false,
      // 通知业务员
      noticeDisabled: false,
      noticeModal: false,
      msgList: [],
      noticeMsg: "",
      sendFlag: true,
      callBtnDisabled: false,
      // messageBtnDisabled: false,
      assignContNoNotnull: true,
      remainMessageCount: 0,
      persontype: null,
      callModalShow: false,
      callIndex: "",
      // 电话录音表格
      phoneRecordColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "recordingaddress",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      phoneRecordData: [],
      // 短信表格
      messageContentColumns: [
        {
          title: "发送时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "发送对象",
          key: "persionid",
          width: "100",
        },
        {
          title: "发送内容",
          key: "messagecontent",
        },
      ],
      messageContentData: [],
      // 面访联系表格
      interviewColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "文件",
          key: "src",
          width: "80",
          slot: "audio",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      interviewData: [],
      // 网络联系表格
      internetColumns: [
        {
          title: "时间",
          key: "createTime",
          width: "180",
        },
        {
          title: "名称",
          key: "path",
          width: "180",
        },
        {
          title: "操作",
          key: "opration",
          slot: "opration",
        },
      ],
      internetData: [],
      userCode: "",
    };
  },
  methods: {
    changeTab(name) {
      console.log("1");

      console.log(name);
      //切换标签页重新请求，参数咋取到时候看
      let ob = {
        planid: "1215890095745388546",
        contno: "0001912515081888",
        paytodate: "2020-06-13",
      };
      // this.queryList(ob);
    },
    queryList(obj) {
      this.getTotal(obj);
    },
    async getTotal({ planid, contno, paytodate }) {
      let res = await this.api.workStatusServiceRecord({
        planid,
        contno,
        paytodate,
      });
      if (res.data) {
        this.historyCount = res.data.length;
      }
      this.serviceRecord = res.data;
      // console.log(this.serviceRecord, "交办件信息");
    },
    // getTotal(planid, contno, paytodate) {
    // this.api.querymessagetoagent({ contno: contno }).then(res => {
    //   if (res.code == 200) {
    //     this.serviceRecord = res.data.records
    //   } else {
    //     this.$Message.info(res.msg)
    //   }
    // })
    //   if (res.data) {
    //     this.historyCount = res.data.length
    //   }
    //   this.serviceRecord = res.data
    // console.log(this.serviceRecord, "交办件信息");
    // },
    // 电话录音对话框点击显示
    async phoneRecordShow({ plainid, workid }) {
      let res = await this.api.recordingInfo({
        plainid,
        workid,
      });
      this.phoneRecordData = res.data;
      // console.log(this.phoneRecordData);
      this.phoneRecord = true;
    },
    // 对话框关闭
    modalVisibleChange3() {
      this.phoneRecord = false;
    },
    // 短信内容对话框点击显示
    async messageContentShow({ plainid, workid }) {
      let res = await this.api.smsData({
        plainid,
        workid,
      });
      this.messageContentData = res.data;
      console.log(res.data);
      this.messageContent = true;
    },
    // 对话框关闭
    modalVisibleChange4() {
      this.messageContent = false;
    },

    // 面访对话框显示
    async interviewShow({ plainid, workid }) {
      let res = await this.api.interviewPicturesInfo({
        plainid,
        workid,
      });
      this.interviewData = res.data;
      this.interviewData.forEach((item, index) => {
        let arr = item.path.split(".");
        let ext = arr[arr.length - 1];
        item.ext = ext;
        if (ext == "jpg" || ext == "png" || ext == "jpeg") {
          item.icon = "image";
        } else {
          item.icon = "paper";
        }
      });
      console.log(this.interviewData);
      this.interviewModal = true;
    },
    modalVisibleChange6() {
      this.interviewModal = false;
      console.log(this.interviewModal, 1111111);
    },
    // 网络对话框
    async internetShow({ plainid, workid }) {
      let res = await this.api.internetPicturesInfo({
        plainid,
        workid,
      });
      this.internetData = res.data;
      // console.log(this.internetData);
      this.internetModal = true;
    },
    modalVisibleChange7() {
      this.internetModal = false;
      // console.log(this.internetModal,1111111)
    },

    downloadPhoneRecord(id) {
      let obj = {
        id,
        worktype: "phone",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${row.id}&&worktype=phone`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    downloadInterview(id) {
      let obj = {
        id,
        worktype: "interview",
      };
      // window.open(
      //   `../rest/fileDownload/downloadWork?id=${id}&&worktype=interview`
      // )
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    downloadInternet(id) {
      let obj = {
        id,
        worktype: "net",
      };
      // window.open(`../rest/fileDownload/downloadWork?id=${id}&&worktype=net`)
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
    playOrPause(data) {
      let arr = this.phoneRecordData;
      console.log(arr, "arr");
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (data.id == item.id) {
          if (!item.handleplayOrPause) {
            this.audioUrl.src = item.photoUrl;
            this.audioid = data.id;
            this.audioUrl.play();
            item.handleplayOrPause = true;
            this.audioUrl.onended = () => {
              this.overAudio();
            };
          } else {
            this.audioUrl.pause();
            item.handleplayOrPause = false;
          }
        } else {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    //播放完毕执行
    overAudio() {
      let arr = this.phoneRecordData;
      this.phoneRecordData = [];
      arr.forEach((item) => {
        if (this.audioid == item.id) {
          item.handleplayOrPause = false;
        }
        this.phoneRecordData.push(item);
      });
    },
    showFile(row) {
      if (row.ext == "jpg" || row.ext == "png" || row.ext == "jpeg") {
        this.biggerPath = row.photoUrl;
        this.handleShowFile = true;
      } else if (row.ext == "pdf") {
        let obj = {
          id: row.id,
          worktype: visit,
        };
        visitFile("scrm-uer/api/fileDownload/downloadWork", obj);
      } else {
        this.$Message.info("该文件不支持在线预览，请下载到本地后打开");
      }
    },
    downloadInternet(row) {
      let obj = {
        id: row.id,
        worktype: "visit",
      };
      exportFile("scrm-gateway/scrm-uer/api/fileDownload/downloadWork", obj);
    },
  },
  mounted() {
    // console.log("0");
    this.tabname = this.$route.query.contno;
    let obj = {
      planid: this.$route.query.planid,
      contno: this.$route.query.contno,
    };
    this.queryList(obj);
  },
};
</script>
<style>
/* @import "@/views/businessManagement/workPool/index.less"; */
.ivu-upload-drag:hover {
  border: none;
}
.ivu-upload-drag {
  border: none;
}
.ivu-modal-header {
  background-color: #2d8cf0;
}
.ivu-modal-close .ivu-icon .ivu-icon-ios-close {
  color: #fff !important;
}
.ivu-modal-header p,
.ivu-modal-header-inner {
  color: white !important;
}
.modalTitle {
  margin-bottom: 10px;
}
.modalContent {
  font-size: 12px;
}
.modalContent .waiqin {
  border-radius: 12px;
  padding-left: 10px;
  padding-right: 10px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  margin-right: 5px;
}
.modalContent .reasonDetail {
  margin-top: 8px;
}
.modalContent .reasonBtn {
  font-size: 12px;
  margin-left: 10px;
  color: #ff8d1a;
  border: #ff8d1a solid 1px;
  border-radius: 0;
  height: 20px;
  line-height: 20px;
}
.playBtn {
  color: #fff;
  padding: 6px;
  background-color: #ababac;
  border-radius: 50%;
  font-size: 20px;
}
</style>